<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import defImg from '@/assets/default-avatar.png'
import { useUserStore } from '@/stores/index.js'
import {
  useGetGoodsDetailByIdService,
  useGetGoodsCommentByGoodsIdService,
  useGetGoodsPromiseService,
  useAddShoopingCartService
} from '@/api/requsets/index.js'
import { showConfirmDialog, showToast } from 'vant'

import { useShoppingCartStore } from '@/stores/index.js'

// 购物车数据
const cartStore = useShoppingCartStore()

// 当前路由数据
const route = useRoute()
// 商品详情
const goodsDetail = ref('')
// 商品评论
const comment = ref('')
// 商品保障
const goodsPromise = ref([])

// 组件挂载 获取 商品详情 和 商品评论 和 商品保障
onMounted(async () => {
  const {
    data: { detail }
  } = await useGetGoodsDetailByIdService(route.params.id)
  goodsDetail.value = detail
  // console.log(goodsDetail.value)
  const { data } = await useGetGoodsCommentByGoodsIdService(route.params.id)
  comment.value = data

  const { data: list } = await useGetGoodsPromiseService(
    goodsDetail.value.goods_id
  )
  goodsPromise.value = list
  console.log(goodsPromise.value)
})

// sheet页展示控制变量
const showPannel = ref(false)
// 控制sheet页展示类型
const mode = ref('')

// 购物车增加商品数量
const cartCount = ref(1)

// 购买数量
const buyCount = ref(1)
// 处理 购物车数量 | 购买数量
const addCount = () => {
  if (mode.value === 'cart') {
    cartCount.value++
    return
  }
  buyCount.value++
}
const subCount = () => {
  if (mode.value === 'cart') {
    cartCount.value =
      cartCount.value > 1 ? cartCount.value - 1 : cartCount.value
    return
  }
  buyCount.value = buyCount.value > 1 ? buyCount.value - 1 : buyCount.value
}

// sheet页展示的回调
const handleShow = (m) => {
  // 控制sheet页展示
  mode.value = m
  showPannel.value = true
}
// 用户信息仓库
const userStore = useUserStore()
// 当前路由
const router = useRouter()

// 当前用户购物车内商品总数
const total = ref()

// 点击 加入购物车 | 立即购买的 回调
const handleBusiness = async () => {
  // 拦截未登录用户
  if (!userStore.token) {
    showConfirmDialog({
      title: '温馨提示',
      message: '您这边还未登录哦',
      confirmButtonText: '去登录',
      confirmButtonColor: 'red',
      cancelButtonText: '再逛一会'
    }).then(() => {
      // 跳转登录页携带回跳地址
      router.replace({
        path: '/login',
        query: {
          backUrl: route.fullPath
        }
      })
    })
    return
  }
  // 判断是添加购物车 还是 购买商品
  if (mode.value === 'cart') {
    // 增加购物车商品
    const {
      data: { cartTotal } // 当前购物车内商品总数
    } = await useAddShoopingCartService({
      goodsId: goodsDetail.value.goods_id, //商品id
      goodsNum: cartCount.value,
      goodsSkuId: '0' // 商品SKUID 默认值 0
    })
    await cartStore.getShoppingCartData()
    total.value = cartTotal
    showPannel.value = false
    showToast('增加成功')
  } else {
    console.log('buyyy')
    await router.push({
      path: '/pay',
      query: {
        mode: 'buyNow',
        goodsId: goodsDetail.value.goods_id,
        goodsSkuId: '0', // 商品SKUID 默认值 0
        goodsNum: buyCount.value
      }
    })
  }
}
</script>

<template>
  <div class="goods-detail">
    <van-nav-bar title="商品详情" left-arrow @click-left="$router.go(-1)" />
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in goodsDetail.goods_images"
        :key="item.file_id"
        class="img-container"
      >
        <img :src="item.external_url" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <div class="message-box">
      <div class="message">
        <div class="price">
          <span class="price-max">￥{{ goodsDetail.goods_price_max }}</span>
          <span class="price-min">￥{{ goodsDetail.goods_price_min }}</span>
        </div>
        <span class="stock-total">已售 {{ goodsDetail.stock_total }} 件</span>
      </div>
      <van-text-ellipsis rows="2" :content="goodsDetail.goods_name" />
      <div class="promise">
        <div
          class="text"
          v-for="item in goodsPromise.list"
          :key="item.service_id"
        >
          <van-icon color="#fa2209" name="passed" />
          <span>{{ item.name }}</span>
        </div>
        <van-icon class="arrow" name="arrow" />
      </div>
    </div>
    <div class="comment">
      <div class="comment-header">
        <span>商品评论({{ comment.total }}条) </span>
        <div class="right">
          <span style="margin-right: 5px; color: #959595">查看更多</span
          ><van-icon color="#959595" class="arrow" name="arrow" />
        </div>
      </div>
      <div
        class="comment-item"
        v-for="item in comment.list"
        :key="item.comment_id"
      >
        <div class="top">
          <img :src="item.user?.avatar_url || defImg" alt="" />
          <span>{{ item.user.nick_name }}</span>
          <van-rate
            v-model="item.score"
            :size="18"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="content">
          <p>{{ item.content }}</p>
        </div>
        <div class="time">
          <p>{{ item.create_time }}</p>
        </div>
      </div>
    </div>
    <div class="content" v-html="goodsDetail.content"></div>
    <div class="footer">
      <div class="icon" @click="$router.push('/home')">
        <van-icon name="wap-home-o" />
        <span>首页</span>
      </div>
      <div class="icon" @click="$router.push('/shoppingCart')">
        <van-icon name="shopping-cart-o" :badge="total" />
        <span>购物车</span>
      </div>
      <div class="shopping" @click="handleShow('cart')">加入购物车</div>
      <div class="buy" @click="handleShow('buy')">立刻购买</div>
    </div>
    <van-action-sheet
      class="my-sheet"
      v-model:show="showPannel"
      :title="mode === 'cart' ? '加入购物车' : '立刻购买'"
    >
      <div class="content">
        <div class="img">
          <img :src="goodsDetail.goods_images[0].preview_url" alt="" />
        </div>
        <div class="text">
          <p>￥{{ goodsDetail.goods_price_min }}</p>
          <p>库存 {{ goodsDetail.stock_total }}</p>
        </div>
      </div>
      <div class="count">
        <span>数量</span>
        <div class="counter">
          <div @click="subCount">-</div>
          <div>{{ mode === 'cart' ? cartCount : buyCount }}</div>
          <div @click="addCount">+</div>
        </div>
      </div>
      <div
        v-if="goodsDetail.stock_total > 0"
        :class="{ button: true, cart: mode === 'cart', buy: mode === 'buy' }"
        @click="handleBusiness"
      >
        {{ mode === 'cart' ? '加入购物车' : '立刻购买' }}
      </div>
      <div v-else class="button empty">该商品已被抢完</div>
    </van-action-sheet>
  </div>
</template>

<style lang="less">
.goods-detail {
  overflow: hidden;
  //position: relative;
  padding-bottom: 20px;
  .my-swipe {
    position: relative;

    .custom-indicator {
      position: absolute;
      text-align: center;
      width: 40px;
      height: 20px;
      line-height: 20px;
      right: 0;
      bottom: 0;
      background: #efefef;
      border-radius: 20px;
    }

    .img-container {
      width: 375px;
      height: 375px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .message-box {
    padding: 0 20px;
    margin: 20px 0;
    .message {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .price-max {
        color: red;
        font-size: 20px;
        margin-right: 5px;
      }

      .price-min {
        font-size: 14px;
        color: #959595;
        position: relative;

        &:before {
          content: '';
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          bottom: 50%;
          border-bottom: 1px solid #003;
        }
      }
      .stock-total {
        color: #959595;
      }
    }
    .promise {
      display: flex;
      position: relative;
      width: 355px;
      height: 40px;
      background: #fafafa;
      line-height: 40px;
      margin-top: 10px;
      span {
        margin-right: 10px;
      }
      .arrow {
        position: absolute;
        right: 0;
        bottom: 50%;
        transform: translateY(50%);
      }
    }
  }
  .comment {
    margin: 20px 0;
    padding: 0 20px;
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .comment-item {
      margin-bottom: 25px;
      .top {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
        }
        span {
          margin: 0 6px;
          font-size: 14px;
        }
      }
      .content {
        margin: 10px 0;
      }
      .time {
        color: #999;
      }
    }
  }
  .content {
    width: 375px;

    p,
    table {
      img {
        width: 100% !important;
      }
    }
  }
  .footer {
    z-index: 999;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #b8b8b8;
    width: 375px;
    height: 60px;
    padding: 0 0 0 20px;
    //margin-bottom: 40px;
    .icon {
      display: flex;
      flex-direction: column;
      i {
        font-size: 24px;
      }
    }
    .shopping,
    .buy {
      border-radius: 25px;
      width: 120px;
      height: 36px;
      color: #fff;
      text-align: center;
      line-height: 36px;
    }
    .shopping {
      background-color: #ffa900;
    }
    .buy {
      background-color: #fe5630;
    }
  }
  .my-sheet {
    padding: 20px;
    .van-popup {
      width: 100%;
      height: 288px;
    }
    .van-action-sheet__content {
      overflow: hidden;
    }
    .content {
      display: flex;
      .img {
        width: 90px;
        height: 90px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        p:first-child {
          color: #fe560a;
          font-size: 24px;
        }
      }
    }
    .count {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
      .counter {
        display: flex;
        align-items: center;
        div {
          height: 30px;
          background: #b8b8b8;
          text-align: center;
          line-height: 30px;
        }

        div:nth-child(1),
        div:nth-child(3) {
          width: 30px;
        }

        div:nth-child(2) {
          width: 40px;
          margin: 0 5px;
        }
      }
    }
    .button {
      margin: auto;
      text-align: center;
      width: 335px;
      height: 40px;
      line-height: 40px;
      border-radius: 30px;
      color: #fff;
      margin-bottom: 20px;

      &.cart {
        background: #ff9402;
      }
      &.buy {
        background: #fe5630;
      }
      &.empty {
        background: #cccccc;
      }
    }
  }
}
.van-dialog {
  width: 100% !important;
}
</style>
